<template>
  <div class="colimn-list-main base-main pdlr15">
    <vue-waterfall-easy
      :imgsArr="imgsArr"
      :mobileGap=14
      @click="clickFn"
      @scrollReachBottom="getData">
      <div class="img-info pr" slot-scope="props">
        <p class="title clamp2 fs15 color45454D">{{props.value.info}}</p>
      </div>
    </vue-waterfall-easy>
  </div>
</template>

<script type="text/ecmascript-6">
  import vueWaterfallEasy from 'vue-waterfall-easy'

  export default {
    components:{
      vueWaterfallEasy
    },
    data() {
      return {
        imgsArr: [
          {
            id: 1,
            href: '',
            info: "广州站联手索弗引入这款智能设备广州站联手索弗引入这款智能设备",
            src: "https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg"
          },
          {
            id: 2,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://lfyfly.github.io/vue-waterfall-easy/demo/static/img/1.jpg"
          },
          {
            id: 3,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://lfyfly.github.io/vue-waterfall-easy/demo/static/img/3.jpg"
          },
          {
            id: 4,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=644653837,1177619925&fm=26&gp=0.jpg"
          },
          {
            id: 5,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=928483064,2110408186&fm=26&gp=0.jpg"
          },
          {
            id: 6,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1206089742,3428063402&fm=26&gp=0.jpg"
          }
        ],//数据
        page: 1,
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.imgsArr = this.imgsArr.concat(this.imgsArr)
      },
      // 点击资讯文章
      clickFn(event, { index, value }) {
        // 阻止a标签跳转
        event.preventDefault()
        if (event.target.tagName.toLowerCase() == 'img') {
          console.log(index, value)
          this.$router.push({
            name: 'recommendDetail',
            query: {id:id}
          })
        }
      },
    },
  }
</script>

<style lang="scss">
@import "../../assets/css/columnList.scss";
</style>
